<!-- 忘记密码 -->
<template>
  <view class="forgotpassword-box">
    <view class="forgotpassword_text">
      <image
        class="login-logo"
        src="https://minio.wskjwl.com/uipicture/login_logo.png"
        mode=""
      ></image
      ><template v-if="isShowpasswordresetbox">
        <u-form :model="form" ref="uForm" :label-width="290">
          <u-form-item prop="phone" :border-bottom="false">
            <view class="user">
              <image
                src="../../static/my/yonghu.png"
                style="width: 32rpx; height: 32rpx; margin: 0 24rpx"
              ></image>
              <u-input
                style="flex: 1"
                type="number"
                name="user_name"
                v-model="form.phone"
                :maxlength="11"
                placeholder="请输入手机号"
              />
            </view>
          </u-form-item>
          <u-form-item prop="verificationCode" :border-bottom="false">
            <view class="row-box">
              <view class="user">
                <image
                  src="../../static/my/yanzhengma.png"
                  style="width: 32rpx; height: 32rpx; margin: 0 24rpx"
                ></image>
                <u-input
                  style="flex: 1"
                  type="number"
                  name="user_name"
                  v-model="form.verificationCode"
                  placeholder="请输入验证码"
                />
              </view>
              <view class="register" @click="getCode">
                <view v-show="show">获取验证码</view>
                <view v-show="!show">{{ count }}秒</view>
              </view>
            </view>
          </u-form-item>
          <u-form-item prop="passWord" :border-bottom="false">
            <view class="user_pwd">
              <image
                src="../../static/my/mima.png"
                style="width: 32rpx; height: 32rpx; margin: 0 24rpx"
              ></image>
              <u-input
                style="flex: 1"
                v-model="form.passWord"
                type="password"
                name="pwd"
                :maxlength="18"
                placeholder="密码为6~18位数字字母组合"
              />
            </view>
          </u-form-item>
          <u-form-item prop="passWord1" :border-bottom="false">
            <view class="user_pwd">
              <image
                src="../../static/my/mima.png"
                style="width: 32rpx; height: 32rpx; margin: 0 24rpx"
              ></image>
              <u-input
                style="flex: 1"
                v-model="form.passWord1"
                type="password"
                name="pwd"
                :maxlength="18"
                placeholder="请再次输入新密码"
              />
            </view>
          </u-form-item>
        </u-form>
        <u-button
          type="primary"
          @click="submit"
          class="vehiclemanagement-index-btn"
          >下一步</u-button
        ></template
      >
      <template v-else>
        <view class="passwordreset-box">
          <u-icon
            name="checkmark-circle-fill"
            color="#2979ff"
            size="198"
          ></u-icon>
          <p class="register">密码重置成功！</p>
        </view>
        <u-button
          type="primary"
          @click="loginBtn"
          class="vehiclemanagement-index-btn"
          >登录</u-button
        >
      </template>
    </view></view
  >
</template>
<script>
export default {
  name: 'forgotpassword',
  data() {
    // 密码验证
    const pwdCheck = async (rule, value, callback) => {
      let reg = /^(?!^\d+$)(?!^[a-zA-Z]+$)[0-9a-zA-Z]{6,16}$/
      if (!value) {
        return callback(new Error('新密码不能为空'))
      } else if (value.length < 6) {
        return callback(new Error('新密码不能少于6位'))
      } else if (value.length > 16) {
        return callback(new Error('新密码最长不能超过16位'))
      } else if (!reg.test(value)) {
        return callback(
          new Error('新密码应为数字字母组合，请检查格式是否正确！')
        )
      } else {
        callback()
      }
    }
    // 重复密码验证
    const pwdAgainCheck = async (rule, value, callback) => {
      if (!value) {
        return callback(new Error('再次输入新密码不能为空'))
      } else if (this.form.passWord != this.form.passWord1) {
        return callback(new Error('两次输入密码不一致'))
      } else {
        callback()
      }
    }
    return {
      customStyle: {
        'margin-left': '10rpx',
        width: '130rpx',
        'font-size': '24rpx',
      },
      getCodeDisabled: false,
      show: true,
      count: '',
      timer: null,
      form: {
        phone: undefined, //手机号
        verificationCode: undefined, //验证码
        passWord: undefined, //请再次输入新密码
        passWord1: undefined, //请再次输入新密码
      },
      rules: {
        phone: [
          {
            required: true,
            message: '请输入手机号',
            trigger: ['change', 'blur'],
          },
          {
            // 自定义验证函数，见上说明
            validator: (rule, value, callback) => {
              // 上面有说，返回true表示校验通过，返回false表示不通过
              // this.$u.test.mobile()就是返回true或者false的
              return this.$u.test.mobile(value)
            },
            message: '手机号码不正确',
            // 触发器可以同时用blur和change
            trigger: ['change', 'blur'],
          },
        ],
        verificationCode: [
          {
            required: true,
            message: '请输入验证码',
            trigger: ['change', 'blur'],
          },
        ],
        passWord: [
          {
            required: true,
            validator: pwdCheck,
            trigger: ['change', 'blur'],
          },
        ],
        passWord1: [
          {
            required: true,
            validator: pwdAgainCheck,
            trigger: ['change', 'blur'],
          },
        ],
      },
      isShowpasswordresetbox: true,
    }
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    this.$refs.uForm.setRules(this.rules)
  },
  methods: {
    //跳登录
    loginBtn() {
      uni.reLaunch({
        url: '/pages/login/login',
      })
    },
    //获取验证码
    getCode() {
      if (this.form.phone) {
        const intime = 60
        if (!this.timer) {
          this.count = intime
          this.show = false
          this.getCodeDisabled = true
          this.timer = setInterval(() => {
            if (this.count > 0 && this.count <= intime) {
              this.count--
            } else {
              this.show = true
              this.getCodeDisabled = false
              clearInterval(this.timer)
              this.timer = null
            }
          }, 1000)
          this.getCodeData({
            type: '1',
            iphone: this.form.phone,
          })
        }
      } else {
        this.$api.msg('请先输入手机号码')
      }
    },

    //提交
    submit() {
      this.$refs.uForm.validate((valid) => {
        if (valid) {
          this.submitData(this.form)
        } else {
          this.$api.msg('请填写相关信息')
        }
      })
    },
    // 发送短信验证码
    async getCodeData(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-auth/client/smsSend',
        val
      )
      if (code === '0') {
        this.$api.msg('短信验证已发送')
      } else {
        this.$api.msg(message)
      }
    },
    // 修改密码提交
    async submitData(val) {
      const { code, result, message } = await this.$u.post(
        '/freight-auth/userAccount/client/submitForgetPassword',
        { ...val, userType: 3 }
      )
      if (code === '0') {
        this.$api.msg('重置成功')
        this.isShowpasswordresetbox = false
        // setTimeout(() => {
        //   uni.redirectTo({
        //     url: '/pages/login/login',
        //   })
        // }, 200)
      } else {
        this.$api.msg(message)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
page {
  height: 100%;
}
.forgotpassword-box {
  width: 100%;
  height: 100%;
  .forgotpassword_text {
    padding: 0 50rpx;
    background: white;
    .login-logo {
      width: 240rpx;
      height: 60rpx;
      margin: 88rpx 0 90rpx 0;
    }
    .u-form-item {
      padding: 0;
      height: 120rpx;
    }
    /deep/.u-form-item__message {
      margin-top: 8rpx;
      white-space: nowrap;
      padding-left: 0rpx !important;
    }
  }
  .row-box {
    display: flex;
    border: 2rpx solid #dee0e2;
    border-radius: 10rpx;
    height: 82rpx;
    width: 100%;
    .user {
      height: 100%;
      width: 100%;
      padding: 0 12rpx 0 10rpx;
      border: none;
      display: flex;
      align-items: center;
      font-size: 28rpx;
      .svg-icon {
        width: 35rpx;
        height: 39rpx;
        margin: 0 18rpx 0 20rpx;
      }
      text {
        font-weight: 400;
        color: rgba(51, 51, 51, 1);
        line-height: 64rpx;
      }

      .user_name {
        color: rgba(153, 153, 153, 1);
        height: 54rpx;
        line-height: 78rpx;
      }
    }
    .register {
      color: #2e87fe;
      display: flex;
      white-space: nowrap;
      align-items: center;
      margin-right: 20rpx;
    }
  }
  .getCode-box {
    width: 100rpx;
    margin-left: 10rpx;
  }
  .user {
    height: 82rpx;
    width: 100%;
    padding: 0 10rpx 0 10rpx;
    border: 2rpx solid #dee0e2;
    /* box-shadow: 0px 4rpx 10rpx 0px rgba(157, 155, 155, 0.35); */
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    .svg-icon {
      width: 35rpx;
      height: 39rpx;
      margin: 0 18rpx 0 20rpx;
    }
    text {
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 64rpx;
    }

    .user_name {
      color: rgba(153, 153, 153, 1);
      height: 54rpx;
      line-height: 78rpx;
    }
  }
  .user_pwd {
    height: 82rpx;
    width: 100%;
    padding: 0 10rpx 0 10rpx;
    border: 2rpx solid #dee0e2;
    /* box-shadow: 0px 4rpx 10rpx 0px rgba(157, 155, 155, 0.35); */
    border-radius: 10rpx;
    display: flex;
    align-items: center;
    font-size: 28rpx;
    .svg-icon {
      width: 35rpx;
      height: 39rpx;
      margin: 0 18rpx 0 20rpx;
    }
    text {
      font-weight: 400;
      color: rgba(51, 51, 51, 1);
      line-height: 64rpx;
    }

    .pwd {
      color: rgba(153, 153, 153, 1);
      line-height: 78rpx;
      height: 54rpx;
    }
  }
  .passwordreset-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    .register {
      color: #2e87fe;
      margin-bottom: 30rpx;
    }
  }
  .vehiclemanagement-index-btn {
    margin-top: 170rpx;
  }
}
</style>
